<template>
  <div
    class="bg-[#252931] mt-3 text-[0.65vw] h-[7vw] w-full py-1 px-3 border border-solid border-[#4c4d4f] rounded flex justify-between items-center"
  >
    <img
      :src="'http://127.0.0.1:3006' + data.img"
      alt=""
      class="h-[5.5vw] w-[5.5vw] rounded object-cover"
    />
    <div class="w-[80px]">{{ data.title }}</div>
    <div class="w-[80px]">{{ data.price }}</div>
    <div class="w-[80px]">{{ isstratus }}</div>
    <div class="w-[160px]">{{ data.createdAt }}</div>
    <div class="w-[160px]">
      <el-popconfirm
        v-if="data.status == 0"
        title="同意审核?"
        @confirm="agreee(1)"
      >
        <template #reference>
          <el-button type="primary" class="!w-[3.7vw] !h-[1.6vw] !text-[0.65vw]"
            >同意审核</el-button
          >
        </template>
      </el-popconfirm>
      <el-popconfirm
        v-if="data.status == 0"
        title="拒绝审核?"
        @confirm="agreee(2)"
      >
        <template #reference>
          <el-button type="danger" class="!w-[3.7vw] !h-[1.6vw] !text-[0.65vw]"
            >拒绝审核</el-button
          >
        </template>
      </el-popconfirm>
      <el-button
        v-if="data.status !== 0"
        class="!w-[3.7vw] !h-[1.6vw] !text-[0.65vw]"
        >已上架</el-button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { setproductstatus } from "../../../api/index";
import { ElMessage } from "element-plus";
const emit = defineEmits(["shuaixn"]);
const prop = defineProps(["data"]);
const isstratus = computed(() => {
  switch (prop.data.lx) {
    case 0:
      return "主食";
    case 1:
      return "早餐";
    case 2:
      return "晚餐";
    case 3:
      return "甜品";
    case 4:
      return "饮料";
  }
});
const agreee = async (e: number) => {
  const rudata = await setproductstatus(prop.data.id, e);
  if (rudata.code == 200) {
    emit("shuaixn");
    ElMessage({
      message: "已拒绝",
      type: "success",
    });
  }
};
</script>
